<script setup lang='ts'>
import { ref } from 'vue';
import axios from "axios"
// const account = ref("cdshi0023")
// const pwd= ref("123456")
interface user{
    account:string,
    password:string
}


const person = <user>{
    account:"cdshi0023",
    password:"123456"
}

const login = async () => {
    if(person.account && person.password){
//  if(account.value && password.value) {
//    const res = await axios.post("https://meikou-api.itheima.net/login", {
//         account: account.value,
//         password: password.value
//     })
    const res = await axios.post("https://meikou-api.itheima.net/login", person)
    alert(JSON.stringify(res.data))
    

 }else {
    alert("用户名和密码不能为空")
 }
}
</script>

<template>
    <div class="outerContainer">
        <div class="innerForm">
            <input type="text" placeholder="请输入账号" v-model="person.account">
            <input type="password" placeholder="请输入密码" v-model="person.password">
            <button type="button" @click="login">登录</button>
        </div>
    </div>
</template>

<style scoped>
    .innerForm{
        background-color: #33ccff;
        width: 400px;
        height: 200px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        padding: 0 20px;
    }
</style>